<template>
  <div class="p-2 radius-12 bg-fff">
    <a-form
      layout="inline"
      class="form-container"
    >
      <a-form-item label="请输入作品名称">
        <a-input placeholder="请输入作品名称"></a-input>
      </a-form-item>
      <a-form-item label="编辑权限">
        <a-radio-group>
          <a-radio value="1">仅个人</a-radio>
          <a-radio value="2">所有人均可</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="模特选择">
        <a-radio-group>
          <a-radio value="1">成人</a-radio>
          <a-radio value="2">儿童</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-space :size="12">
          <a-button shape="round" class="w-90">
            取消
          </a-button>
          <a-button shape="round" type="primary" class="w-90">
            下一步
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
  <MPageContainer class="mt-1 bg-fff pt-1">
    <div class="flex align-center justify-between pl-2 pr-2">
      <div>
        <span class="color-1 weight-600">请点击选择款式</span>
        <span class="ml-4">已选款式</span>
        <span class="pl-1 color-3">暂无</span>
      </div>
      <div class="flex align-center">
        <span>共</span>
        <span class="font-md color-6 weight-900 pl-1 pr-1">36</span>
        <span>款</span>
      </div>
    </div>
    <div class="flex flex-wrap">
      <div v-for="i in 8" class="flex p-1 justify-center" style="width: 20%; min-width: 260px;">
        <a-card :class="{'active': checkIdx == i }" hoverable style="width: 240px; padding: 0;" @click="checkHandle(i)">
          <div class="flex justify-center">
            <div class="cloth-img"></div>
          </div>
          <div class="footer-container bg-F5F5FA">
            <a-descriptions
              size="small"
              :column="1"
              :labelStyle="{fontSize: '14px', color: '#A1A6B0', fontWeight: '400'}"
              :contentStyle="{fontSize: '14px', color: '#212325', fontWeight: '400'}"
            >
              <a-descriptions-item label="款式名称" style="margin-bottom: 0;">慕旭茯</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>
    </div>
  </MPageContainer>
</template>

<script lang="ts">
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  import image from '@/assets/image/1_1.png'

  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const checkIdx: any = ref(-1)
      onMounted(() => {
      })

      const cancelHandle = () => {
        proxy.$router.go(-1)
      }

      const checkHandle = (idx) => {
        checkIdx.value = idx
        console.error(checkIdx.value)
      }

      return {
        checkIdx,
        checkHandle,
        image: image,
        cancelHandle
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  :deep(.ant-descriptions-small .ant-descriptions-row > th, .ant-descriptions-small .ant-descriptions-row > td) {
    margin-bottom: 0;
  }
  .form-container {
    display: flex;
    justify-content: space-between;
  }

  .active {
    position: relative;
    border: 2px solid #4075E5;
  }
  .active::after {
    position: absolute;
    content: "";
    right: -2px;
    top: -2px;
    width: 36px;
    height: 36px;
    z-index: 99;
    background: url('@/assets/image/check.png');
    background-size: cover;
  }
  .cloth-img {
    width: 150px;
    height: 240px;
    background-image: url('../../assets/image/1_1.png');
    background-repeat:  no-repeat;
    background-position: center center;
    background-size: contain;
  }
</style>
